<script setup lang="ts">
const { waterForm, tableHeaders } = defineProps<{
    waterForm: Object;  // 定义采样时间的类型
    tableHeaders: Array<any>;  // 定义采样时间的类型
    tabler: Array<any>;  // 定义采样时间的类型
}>();
</script>

<template>
    <div class="card">
        <div v-for="(pageData, pageIndex) in tableHeaders" :key="pageIndex">
            <h1 style="text-align: center">水质 生化需氧量分析原始记录(A面)</h1>
            <div>SXLPHJ/JL/CX-22-50</div>
            <table class="table w">
                <tr>
                    <td>任务编号</td>
                    <td>
                        {{ waterForm.task_name }}
                    </td>
                    <td>采样日期</td>
                    <td>
                        {{ waterForm.sampling_time }}
                    </td>
                    <td>分析日期</td>
                    <td>
                        {{ waterForm.anal_time }}
                    </td>
                </tr>
                <tr>
                    <td>分析仪器</td>
                    <td colspan="2">
                        {{ waterForm.device?.device_name?.join('\n') }}
                    </td>
                    <td colspan="1">仪器型号</td>
                    <td colspan="1">
                        {{ waterForm.device?.device_model?.join('\n') }}
                    </td>
                    <td colspan="1">仪器编号</td>
                    <td colspan="1">
                        {{ waterForm.device?.device_number?.join('\n') }}
                    </td>
                    <!--          选择仪器组件-->
                    <!-- <Device :water-form="waterForm"></Device> -->
                </tr>
                <tr>
                    <td>培养箱编号</td>
                    <td>
                        {{ waterForm.pyxbh }}
                    </td>
                    <td>培养温度</td>
                    <td>
                        {{ waterForm.pywd }}
                    </td>
                    <td>培养时间</td>
                    <td>
                        {{ waterForm.pysj }}
                    </td>
                </tr>
                <tr>
                    <td>环境温度</td>
                    <td>
                        {{ waterForm.temperature }}
                    </td>
                    <td>环境湿度</td>
                    <td>
                        {{ waterForm.humidity }}
                    </td>
                    <td>样品类别</td>
                    <td>
                        {{ waterForm.category_id }}
                    </td>
                </tr>
                <tr>
                    <td colspan="2">
                        {{ waterForm.way === "1" ? "碘量法" : "电化学探头法" }}
                    </td>
                    <td colspan="4">
                        {{ waterForm.desc }}
                    </td>
                </tr>
                <tr>
                    <td>样品处理</td>
                    <td colspan="5">
                        {{ waterForm.ypcl }}
                    </td>
                </tr>
            </table>
            <table class="table w">
                <tr>
                    <td v-for="(key, index) in Object.keys(tableHeaders[0][0])" :key="index"
                        :colspan="index > 0 ? 1 : ''">
                        {{ key }}
                    </td>
                </tr>
                <tr v-for="(row, rowIndex) in pageData" :key="rowIndex">
                    <td v-for="(key, colIndex) in Object.keys(row)" :key="colIndex">
                        <div style="height: 25px;display: flex;align-items: center;justify-content: center">
                            {{ row[key] }}
                        </div>
                    </td>
                </tr>
                <tr>
                    <td>备注</td>
                    <td colspan="8">
                        {{ waterForm.notes }}
                    </td>
                </tr>
            </table>
            <div style="display: flex;align-items: center;justify-content: space-between;margin-top: 20px">
                <div>分析人：</div>
                <div>校核人：</div>
                <div>审核人：</div>
                <div>第 {{ pageIndex + 1 }} 页 / 共 {{ tableHeaders.length }} 页</div>
            </div>
        </div>
        <div style="padding-top: 50px">
            <h1 style="text-align: center">水质 气相色谱法分析原始记录（B面）</h1>
            <div>SXLPHJ/JL/CX-22-62</div>
            <table class="table">
                <tr>
                    <td colspan="5" style="text-align: center">
                        平行样测定
                    </td>
                </tr>
                <tr>
                    <td>样品编号</td>
                    <td>BOD(mg/L)</td>
                    <td>相对百分偏差(%)</td>
                    <td>质控要求(%)</td>
                    <td>是否合格</td>
                </tr>
                <tr v-for="(item, index) in waterForm.pxycd" :key="index">
                    <td>
                        {{ item.px_ypbh }}
                    </td>
                    <td>
                        {{ item.px_bod }}
                    </td>

                    <!-- 只在偶数索引时渲染，并合并 2 行 -->
                    <td v-if="index % 2 === 0" :rowspan="2">
                        {{ item.px_xdbfpc }}
                    </td>

                    <td v-if="index % 2 === 0" :rowspan="2">
                        {{ item.px_zkyq }}
                    </td>
                    <td v-if="index % 2 === 0" :rowspan="2">
                        {{ item.px_sfhg }}
                    </td>
                </tr>

                <tr>
                    <td colspan="5" style="text-align: center">
                        空白样品测定
                    </td>
                </tr>
                <tr>
                    <td>样品编号</td>
                    <td>测定浓度(mg/L)</td>
                    <td>质控要求(mg/L)</td>
                    <td colspan="2">是否合格</td>
                </tr>
                <tr v-for="(item, index) in waterForm.kbycd" :key="index">
                    <td>
                        {{ item.kb_ypbh }}
                    </td>
                    <td>
                        {{ item.kb_cdnd }}
                    </td>
                    <td>
                        {{ item.kb_zkyq }}
                    </td>
                    <td colspan="2">
                        {{ item.kb_sfhg }}
                    </td>
                </tr>
                <tr>
                    <td colspan="5" style="text-align: center">
                        标准样品测定
                    </td>
                </tr>
                <tr style="background-color: #f2f2f2">
                    <td>样品编号</td>
                    <td>测定浓度(mg/L)</td>
                    <td>质控要求(mg/L)</td>
                    <td colspan="2">是否合格</td>
                </tr>
                <tr v-for="(item, index) in waterForm.bzycd" :key="index">
                    <td>
                        {{ item.bz_ypbh }}
                    </td>
                    <td>
                        {{ item.bz_cdnd }}
                    </td>
                    <td>
                        {{ item.bz_bzz }}
                    </td>
                    <td colspan="2">
                        {{ item.bz_sfhg }}
                    </td>
                </tr>
                <tr>
                    <td>备注</td>
                    <td colspan="4">
                        {{ waterForm.notes }}
                    </td>
                </tr>
            </table>
            <div style="display: flex;align-items: center;justify-content: space-between;margin-top: 20px">
                <div>分析人：</div>
                <div>校核人：</div>
                <div>审核人：</div>
                <div>第 {{ tableHeaders.length }} 页 / 共 {{ tableHeaders.length }} 页</div>
            </div>
        </div>
    </div>

</template>
<style scoped>
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* 设置表格的边框、外边距等 */
table {
    border-collapse: collapse;
    width: 100%;
}

table th,
table td {
    border: 1px solid #ddd;
    padding: 2px 10px;
    font-size: 11px;
    text-align: center;
    height: 25px;
}

tr {
    page-break-inside: avoid
}

.fs12 {
    font-size: 12px;
}

.w tr td:nth-child(1) {
    width: 200px !important;
    white-space: nowrap;
}


.table {
    width: 100%;
}

/* 打印时隐藏所有默认的头部和尾部 */
@media print {

    /* 隐藏页眉和页脚 */
    @page {
        margin: 0;
    }

    table {
        page-break-inside: avoid;
    }

    tr {
        page-break-inside: avoid;
        page-break-after: auto;
    }

    th,
    td {
        page-break-inside: avoid;
    }

    body {
        margin: 0;
        margin-top: -5mm;
        padding: 0;
        zoom: 100%;
    }

    div {
        page-break-inside: avoid;
    }

    /* 禁用打印页脚和页眉 */
    .no-print {
        display: none;
    }

    /* 如果你不想打印特定元素，可以这样设置 */
    header,
    footer,
    nav,
    .no-print {
        display: none !important;
    }

    /* 保证内容区域不受其他元素影响 */
    .content {
        display: block;
    }
}
</style>
